<template>
	<view class="page-total">
		<view class="tab-list">
			<view class="list" v-for="(item,index) in TabBarList" 
			@click="onTabBar(item)"
			:key="index">
				<image :src="item.acImg" mode="widthFix" v-show="tabBarShow === item.index"></image>
				<image :src="item.img" mode="widthFix" v-show="tabBarShow != item.index"></image>
				<text :class="{'action':tabBarShow===item.index}">{{item.name}}</text>
			</view>
		</view>
	</view>
	<view style="height: 150rpx;"></view>
</template>

<script  setup lang="ts">
	defineProps({
		tabBarShow: {
			type: Number,
			default: 0,
		}
	})
	const TabBarList = [
		{
			index: 0,
			name: '数据看板',
			img: '/static/tabbar/teamshuju.png',
			acImg: '/static/tabbar/teamshujuActive.png'
		},
		{
			index: 1,
			name: '订单管理',
			img: '/static/tabbar/teamorder.png',
			acImg: '/static/tabbar/teamorderActive.png'
		},
		{
			index: 2,
			name: '个人中心',
			img: '/static/tabbar/teamuser.png',
			acImg: '/static/tabbar/teamuserActive.png'
		},
	]
	const onTabBar = (item: { index: any })=>{
		switch (item.index){
			case 0:
				uni.redirectTo({
					url:'/pages/team/teamshuju'
				})
				break;
			case 1:
				uni.redirectTo({
					url:'/pages/team/teamorder'
				})
				break;
			case 2:
				uni.redirectTo({
					url:'/pages/team/teamcenter'
				})
				break;
		}
	}
	
</script>

<style scoped lang="scss">
	.page-total{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		// height: 100rpx;
	}
	.tab-list{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding-top: 20rpx;
		padding-bottom: 30rpx;
		background-color: #FFFFFF;
		.list{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 20%;
			height: 100rpx;
			image{
				width: 58rpx;
				height: 58rpx;
			}
			text{
				color: #C8C9CC;
				font-size: 26rpx;
				margin-top: 10rpx;
			}
			.action{
				color: #FE7431;
			}
		}
	}
</style>
